<script setup lang="ts">

import SendFeedbackSvg from "@/svg/SendFeedbackSvg.vue";
import {ref} from "vue";
import {addUserAdvice} from "@/Network/feedbackApi";
import router from "@/Router";

let problemInput = ref("")
let adviceInput = ref("")
let phoneInput = ref("")
let mailInput = ref("")

//后续实际运行会用到
let accountName = localStorage.getItem("accountName")
function submitFeedback(){
  if(problemInput.value!="" ){
    let data={
      "accountName":accountName,
      "problem":problemInput.value,
      "advice": adviceInput.value==""?null:adviceInput.value,
      "contactPhone": phoneInput.value==""?null:phoneInput.value,
      "contactMail": mailInput.value==""?null:mailInput.value,
    }
    addUserAdvice(data).then(res=>{
      console.log("提交成功")
      alert("提交成功，即将返回")
      goBack()
    })
    console.log("可以提交")
  } else{
    alert("问题描述不可以为空")
  }
}

function goBack(){
  router.back()
}
</script>

<template>
  <div class="fixed   w-188 h-140 right--25 bottom-15 pic rotate-y-180 opacity-80"></div>
  <el-scrollbar style="width: 100%" height="86vh" class="ml-10">
      <div class="w-full h-full  flex flex-col justify-start items-start text-gray-7 p-4">
        <div class=" w-full flex justify-start items-start gap-5  select-none" >
          <send-feedback-svg class="w-10 h-10"></send-feedback-svg>
          <div class="text-8  font-bold">我要反馈</div>
        </div>
        <el-divider></el-divider>
        <div class="w-55% grow text-4.5 flex flex-col items-start justify-start gap-8">
          <div class="w-full flex flex-col items-start justify-center gap-2">
            <div>描述您遇到的问题</div>
            <div class="w-full">
              <el-input class="el-input-style hover:border-1 hover:border-black hover:border-solid"
                   v-model="problemInput"
                  :autosize="{minRows:4}"
                  type="textarea"
                  placeholder="请描述您遇到的问题"
              />
            </div>
          </div>
          <div class="w-full flex flex-col items-start justify-center gap-2">
            <div>（选填）您的建议</div>
            <div class="w-full">
              <el-input class="el-input-style"
                   v-model="adviceInput"
                  :autosize="{minRows:4}"
                  type="textarea"
                  placeholder="感谢您提供的建议！"
              />
            </div>
          </div>
          <div class="w-full flex items-center justify-start gap-4">
            <div>（选填）您的电话联系方式</div>
            <el-input  class="grow el-input-style" v-model="phoneInput" style="width: 240px" placeholder="请填写您的电话" />
          </div>
          <div class="w-full flex items-center justify-start gap-4 ">
            <div>（选填）您的邮箱联系方式</div>
            <el-input class="grow el-input-style" v-model="mailInput" style="width: 240px" placeholder="请填写您的邮箱" />
          </div>
          <div class="w-full flex justify-center items-center gap-10">
            <button @click="goBack" class="w-50% h-12 bg-gray-2 hover:bg-gray-3  p-2 rounded-s">取消并返回</button>
            <button @click="submitFeedback" class="w-50% h-12 bg-green-4 hover:bg-green-5 text-white p-2 rounded-s">提交反馈</button>
          </div>
        </div>
      </div>
    </el-scrollbar>



</template>

<style scoped>
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
// 滚动条整体部分

// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

// 边角，即两个滚动条的交汇处

// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件


*/
.el-input-style{
  border:1px solid #4bde81;
  border-radius:6px;
}

.pic {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/feedback.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>